<template>

	<view class="page" :style="{overflow: 'hidden','--custom-font-size': custom_font_size+'px'}"  style="height: 100vh;">
		<!-- #ifdef APP-PLUS -->
		<serving-view :list_id="list_id" @setState="setSeringState" :show="showServing" :state="servingState"
			@closeServing="showServing = false" ref="serving"></serving-view>
		<!-- #endif -->
		<view class="page-content">
			<view class="gong-gao-content" v-if="msgList.type == 1">
				<Marqueen v-if="false" :notice="[notice]" @click="goToNoticeDetail()"></Marqueen>
				<!-- 				<view class="member-image-logo">
					<view class="member-content" v-for="(item,i) in memberPhotos">
						<image class="img-logo" :src="staticPhoto+ item.photo" @tap="toUserDetail(item)"></image>
					</view>
					<view class="jiazai" v-if="memberPhotos.length >=5" @tap="group_info">
						<image src="/static/theme/default/jiazai.png"></image>
					</view>
				</view> -->
				<view class="gong-gao-content-info" v-if="top_notice">
					<view class="iconfont-im icon-gonggao gong-gao-content-info-icon" style="color: #0000FF;"></view>
					<span style="font-size:12px;color: #0000FF;width: 18%;">群公告：</span>
					<marquee scrollamount="3" style="font-size:12px;color: #000" ref="scrollNotice">{{top_notice}}</marquee>
				</view>
				<!--<view class="member-image-logo">-->
				<!--<image src="https://im.smiaoshen.com/static/photo/default_man/300.jpg"></image>-->
				<!--</view>-->
			</view>

			<view class="content">

				<scroll-view class="msg-list"  :style="{height:scrollHeight,paddingTop:pt}" scroll-y="true"
					:scroll-with-animation="scrollAnimation" :scroll-into-view="scrollToView"
					@scrolltoupper="loadHistory" :upper-threshold="30" id="scrollview" :scroll-top="scrollTop"
					@scroll="scrollEven" @touchstart="hideDrawer(3)">

					<uni-load-more status="noMore" v-if="noMore && !(isHistoryLoading)" />

					<view class="row" v-for="(row,index) in msgList.list" :key="index" :id="'msg' + row.msg.id">

						<!-- 系统消息 -->
						<block v-if="row.type==1">
							<view :class="['system',msgList.type == 1 && index == 0 ? 'sys':'']"
								:style="{padding:'10upx 0',marginBottom:'10upx'}">

								<!-- 文字消息-->
								<view v-if="row.msg.type==0 && row.msg.content && row.msg.content.text" class="text">
									{{row.msg.content.text}}
								</view>
								<!-- 领取红包消息 -->
								<view v-if="row.msg.type==5" class="red-envelope" style="letter-spacing:4upx;">
									<image src="/static/img/red-envelope-chat.png" :lazy-load="true" />
									<!-- {{row.msg}} -->
									<block
										v-if="row.msg.content.rid_user_id == my_data.id && row.msg.content.user_id == my_data.id">
										我领取了自己发出的
									</block>
									<block
										v-else-if="row.msg.content.rid_user_id != my_data.id && row.msg.content.user_id == my_data.id">
										我领取了{{row.msg.content.rid_nickname}}发出的
									</block>
									<block
										v-else-if="row.msg.content.rid_user_id == my_data.id && row.msg.content.user_id != my_data.id">
										{{row.msg.content.nickname}}领取了我发出的
									</block>
									<block v-else>
										{{row.msg.content.nickname}}领取了{{row.msg.content.rid_nickname}}发出的
									</block>
									<text style="color: red;" @tap="toDetails(row.msg.content.rid)">红包</text>
								</view>
							</view>
						</block>

						<block
							v-if="row.type == 0 && (index == 0 || (row.msg.time - msgList.list[index - 1].msg.time > 300))">
							<view class="system" style="margin-bottom: 10upx">
								<!-- 文字消息 -->
								<view class="text" style="color: #ffffff;border-radius:12px;font-weight:600">
									{{ timestampFormat(row.msg.time + '') }}
								</view>
							</view>
						</block>

						<!-- 用户消息 -->
						<block v-if="row.type==0">
							<!-- 自己发出的消息 -->
							<view  v-if="row.msg.user_info.uid == my_data.id ">
							
								
								<view class="my msg-item">
									
								
								
								<view class="select" v-if="redirectingMsg">
									<checkbox-group @change="(state) => redirectMessageCheck(state, row.msg)">
										<label for="">
											<checkbox></checkbox>
										</label>
									</checkbox-group>
								</view>

								<!-- 左-消息 -->
								<view class="left"
									@longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"
									:id="row.msg.id" style="position: relative;">


							
									<view class="" style="margin-right: 5px;">
										<text v-if="row.msg.time<=nowReadTime"
											style="color: #22ff00;font-weight: bold;">已读</text>
										<text v-else style="color: #ff0004;font-weight: bold;">未读</text>
									</view>

									<!-- <image v-if="row.msg.time<=nowReadTime" src="/static/img/read.png" mode="widthFix"
										style="width: 30upx;margin-right: 10upx;"></image>
									<image v-else src="/static/img/unread.png" mode="widthFix"
										style="width: 30upx;margin-right: 10upx;">
									</image> -->
									<!-- 文字消息 非图片-->
									<!-- <view v-if="row.msg.type==0 && !isImage(row.msg.content.text)" class="bubble">
										<rich-text :nodes="row.msg.content.text ? row.msg.content.text : ' '"
											space="true" selectable="true" />
									</view> -->
									<view v-if="row.msg.type==0 && !isImage(row.msg.content.text)" class="bubble">
										<view class="" v-html="row.msg.content.text">
											
										</view>
									
									</view>
									<!-- 文字消息 图片链接 -->
									<view v-if="row.msg.type==0 && isImage(row.msg.content.text)" class="bubble"
										@tap="showPic2(row.msg.content.text)">
										<image :src="row.msg.content.text" :style="{'width':'200px','height':'200px'}"
											mode="widthFix" :lazy-load="true" />
											
									</view>
									
									<!-- 语言消息 -->
									<view v-if="row.msg.type==1" class="bubble voice" @tap="playVoice(row.msg)"
										:class="playMsgid == row.msg.id?'play':''">
										<view class="length">{{row.msg.content.length}}</view>
										<view class="icon my-voice"></view>
									</view>
									<!-- 图片消息 -->
									<view v-if="row.msg.type==2" class="bubble img" @tap="showPic1(row.msg)">
										<image :src="(staticPath+ '/' + row.msg.content.full_url)"
											:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"
											mode="widthFix" :lazy-load="true" />
										<!-- <image :src="(staticPath + list_id + '/' + row.msg.content.url)"
											:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"
											mode="widthFix" :lazy-load="true" /> -->
									</view>
									<!-- 视频消息 -->
									<view v-if="row.msg.type==3" class="bubble img ">
										<image :src=" staticPath + row.msg.content.full_movie"
											style="max-height:unset!important;" mode="widthFix">
										</image>


										<image class="bubble-bofang" src="/static/theme/default/my/bofang.png"
											style="width: 50px;height: 50px;" @tap="autoVideo(row.msg)"></image>
									</view>
									<!-- 红包 -->
									<view v-if="row.msg.type==5" class="bubble red-envelope"
										@tap="openRedEnvelope(row.msg,index)">
										<image src="/static/img/red-envelope.png" :lazy-load="true"
											:style="{'opacity':(receive_list.indexOf(row.msg.content.rid))< 0 ? 1 : 0.6}">
										</image>
										<view class="tis">
											{{(receive_list.indexOf(row.msg.content.rid)) <0?'恭喜发财，大吉大利':'已领取'}}
										</view>
										<view class="blessing">
											<view class="info">
												{{row.msg.content.blessing}}
											</view>
											<view class="has-get-red">
												点击打开红包
											</view>
											<!--{{row.msg.content.blessing}}-->
										</view>
									</view>
									<!-- 在线视频 -->
									<view v-if="row.msg.type==6" class="bubble">

										<view> {{row.msg.content.text}}
										</view>
										<text style="margin-left:2px" class="iconfont-im">&#xe619;
										</text>
									</view>
									<!-- 在线音频-->
									<view v-if="row.msg.type==7" class="bubble">
										<view> {{row.msg.content.text}}
										</view>
										<text style="margin-left:2px" class="iconfonts">&#xe60b;
										</text>
									</view>
									<!--卡片-->
									<view v-if="row.msg.type==8" class="send-card" @tap="getCard(row.msg)">
										<view class="send-card-content">
											<image :src="staticPhoto+row.msg.content.face" :lazy-load="true"
												style="width: 85upx;height: 85upx;"></image>
											<text>{{row.msg.content.nickname}}</text>
										</view>
										<view class="send-card-content-text">
											<text>名片</text>
										</view>
									</view>
									<!--戳一戳-->
									<view v-if="row.msg.type==9" class="bubble img">
										<image src="/static/theme/default/chuoyichuo.gif" :lazy-load="true"
											style="height: 70px;width: 130px;" mode="heightFix" />
									</view>
									<!-- 位置-->
									<view v-if="row.msg.type==10" class="bubble" @tap="openMap(row.msg.content)">
										<view class="address-flex">
											<view class="address-name">
												<text>{{row.msg.content && row.msg.content.name}}</text>
												<text
													class="text-gray">{{row.msg.content && row.msg.content.address}}</text>
											</view>
											<image class="fun-icon" src="../../static/theme/default/position.png"
												mode="widthFix"></image>
										</view>
									</view>
									<!-- 文件 -->
									<view v-if="row.msg.type==11" class="bubble"
										@tap="downFile(staticPath+ list_id+'/' + row.msg.content.url)">
										<view class="address-flex">
											<view class="address-name">
												<text>{{row.msg.content && row.msg.content.name}}</text>
												<text
													class="text-gray">{{row.msg.content && row.msg.content.length}}kb</text>
											</view>
											<image class="fun-icon" src="../../static/theme/default/file.png"
												mode="widthFix"></image>
										</view>
									</view>

								</view>
								<!-- 右-头像 -->
								<view class="right right-avatar" @tap="goDetails(row.msg.user_info.uid,row)">
									<text v-if="msgList.type" class="userinfonameyou">{{row.msg.user_info.name}}</text>
									<CacheImage v-if="row.msg.user_info.uid"
										:url="(row.msg.is_niming == 1) ? '/static/theme/default/my/niming.png' : myPhoto"
										:fileMd5="row.msg.user_info.uid" width="80rpx" height="80rpx" radius="100%">
									</CacheImage>


									<!-- <image
										:src="(row.msg.is_niming == 1) ? '/static/theme/default/my/niming.png' : myPhoto"
										:lazy-load="true" style="border-radius: 10px;" @error="imageError2" /> -->
									<view class='user_tips gl' v-if="row.msg.is_admin == 1">
										管理员
									</view>
									<view class='user_tips' v-else-if="row.msg.is_admin == 2">
										群主
									</view>
									<view class='user_tips' v-else></view>
								</view>

</view>
	
							    <view style="width: 100%;display: flex;justify-content: flex-end;">
									<view v-if="row.msg.content.is_yingyong&&row.msg.content.is_yingyong!=''" class=""
											style="max-width: 470rpx;font-size: 26rpx;background-color:#C9C9C9;border-radius: 5rpx;margin-top: 5rpx;padding: 5rpx;overflow-wrap: break-word; word-wrap: break-word;">
											{{row.msg.content.is_yingyong}}
									</view>
									<view class="right right-avatar" style="width: 100rpx;">
										
									</view>
								</view>

							</view>

							<!-- 别人发出的消息 -->
							<view class="" v-if="row.msg.user_info.uid != my_data.id">
								
								
								<view class="select" v-if="redirectingMsg">
									<radio-group @change="(state) => redirectMessageCheck(state, row.msg)">
										<label for="">
											<radio :checked="redirectMsgs.indexOf(row.msg.id) !== -1"></radio>转发
										</label>
									</radio-group>
								</view>
								
								
								
								<view class="other"> 
								<!-- 左-头像 -->
								<view class="left">
									<text v-if="msgList.type" class="userinfoname">{{maskMiddleNickname(row.msg.user_info.name)}}</text>



									<view class="" @longtap="showAction(row)"
										@tap="goDetails(row.msg.user_info.uid,row)">
										<CacheImage v-if="row.msg.user_info.uid"
											:url="(row.msg.is_niming == 1)? '/static/theme/default/my/niming.png' : (staticPhoto + row.msg.user_info.face)"
											:fileMd5="row.msg.user_info.uid" width="80rpx" height="80rpx" radius="100%">
										</CacheImage>
										<!-- <image @longtap="showAction(row)" @tap="goDetails(row.msg.user_info.uid,row)"
												:src="(row.msg.is_niming == 1)? '/static/theme/default/my/niming.png' : (staticPhoto + row.msg.user_info.face)"
												:lazy-load="true" style="border-radius: 10px;" :data-id="index"
												@error="imageError" /> -->
									</view>


									<view class='user_tips gl' v-if="row.msg.is_admin == 1">
										管理员
									</view>
									<view class='user_tips' v-else-if="row.msg.is_admin == 2">
										群主
									</view>
									<view class='user_tips' v-else></view>
									<view class="action" v-if="row.showAction">
										<view class="action-item" @click="addFriendChat(row)">
											@TA
										</view>
										<view class="action-line">

										</view>
										<view class="action-item" @click="selectMember(row)">
											禁言
										</view>
										<view class="action-line">

										</view>
										<view class="action-item" @click="selectRemoveMember(row)">
											踢出
										</view>

									</view>
								</view>
								<!-- 右-用户名称-时间-消息 -->
								<view class="right"
									@longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type,row.msg.user_info.name)">
									<!-- <view class="username">
                                                      <view class="name">{{row.msg.user_info.username}}</view> <view class="time">{{row.msg.time}}</view>
                                                  </view> -->
									<!-- 文字消息 -->
									<!-- <view v-if="row.msg.type==0 && !isImage(row.msg.content.text)" class="bubble" >
										<rich-text :nodes="row.msg.content.text ? row.msg.content.text : ' '"
											space="true" />
										
									</view> -->

									<view v-if="row.msg.type==0 && !isImage(row.msg.content.text)" class="bubble">
										<view class="" v-html="row.msg.content.text">
										</view>
									</view>

									<!-- 文字消息 图片链接 -->
									<view v-if="row.msg.type==0 && isImage(row.msg.content.text)" class="bubble"
										@tap="showPic2(row.msg.content.text)">
										<image :src="row.msg.content.text" :style="{'width':'200px','height':'auto'}"
											mode="widthFix" :lazy-load="true" />
									</view>
									<!-- 语音消息 -->
									<view v-if="row.msg.type==1" class="bubble voice" @tap="playVoice(row.msg)"
										:class="playMsgid == row.msg.id?'play':''">
										<view class="icon other-voice"></view>
										<view class="length">{{row.msg.content.length}}</view>
									</view>
									<!-- 图片消息 -->
									<view v-if="row.msg.type==2" class="bubble img" @tap="showPic1(row.msg)">
										<image :src="(staticPath+ '/' + row.msg.content.full_url)"
											:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"
											mode="widthFix" :lazy-load="true" />
										<!-- <image :src="(staticPath + list_id + '/' + row.msg.content.url)"
											:style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"
											mode="widthFix" :lazy-load="true" /> -->
									</view>
									<!-- 视频消息 -->
									<view v-if="row.msg.type==3" class="bubble img">
										<image :src="staticPath + row.msg.content.full_movie"
											style="max-height:unset!important;" mode="widthFix"></image>
										<image class="bubble-bofang-left" src="/static/theme/default/my/bofang.png"
											style="width: 50px;height: 50px;" @tap="autoVideo(row.msg)"></image>
									</view>
									<!-- 红包 -->
									<view v-if="row.msg.type==5" class="bubble red-envelope"
										@tap="openRedEnvelope(row.msg,index)">
										<image src="/static/img/red-envelope-o.png" :lazy-load="true"
											:style="{'opacity':(receive_list.indexOf(row.msg.content.rid))< 0 ? 1 : 0.6}">
										</image>
										<view class="tis">
											{{(receive_list.indexOf(row.msg.content.rid)) <0?'恭喜发财，大吉大利':'已领取'}}
										</view>
										<view class="blessing">
											<view class="info">
												{{row.msg.content.blessing}}
											</view>
											<view class="has-get-red">
												点击打开红包
											</view>
											<!--{{row.msg.content.blessing}}-->
										</view>
									</view>
									<view v-if="row.msg.type==6" class="bubble">
										<text style="margin-right:2px" class="iconfont-im">&#xe619;
										</text>
										{{row.msg.content.text}}

									</view>
									<view v-if="row.msg.type==7" class="bubble">
										<text style="margin-right:2px" class="iconfonts">&#xe60b;
										</text>
										{{row.msg.content.text}}
									</view>
									<view v-if="row.msg.type==8" class="send-card" @tap="getCard(row.msg)">
										<view class="send-card-content">
											<image :src="staticPhoto+row.msg.content.face" :lazy-load="true"
												style="width: 85upx;height: 85upx;"></image>
											<text>{{row.msg.content.nickname}}</text>
										</view>
										<view class="send-card-content-text">
											<text>名片</text>
										</view>
									</view>
									<!-- 戳一戳 -->
									<view v-if="row.msg.type==9" class="bubble img" @tap="showPic(row.msg)">
										<image src="/static/theme/default/youchuo.gif" :lazy-load="true"
											style="width: 70px;height: 70px;" />
									</view>
									<!-- 位置-->
									<view v-if="row.msg.type==10" class="bubble" @tap="openMap(row.msg.content)">
										<view class="address-flex">
											<view class="address-name">
												<text>{{row.msg.content && row.msg.content.name}}</text>
												<text
													class="text-gray">{{row.msg.content && row.msg.content.address}}</text>
											</view>
											<image class="fun-icon" src="../../static/theme/default/position.png"
												mode="widthFix"></image>
										</view>
									</view>
									<!-- 文件 -->
									<view v-if="row.msg.type==11" class="bubble"
										@tap="downFile(staticPath+ list_id+'/' + row.msg.content.url)">

										<view class="address-flex">
											<view class="address-name">
												<text>{{row.msg.content && row.msg.content.name}}</text>
												<text
													class="text-gray">{{row.msg.content && row.msg.content.length}}kb</text>
											</view>
											<image class="fun-icon" src="../../static/theme/default/file.png"
												mode="widthFix"></image>
										</view>
									</view>
								</view>
								</view>
								
								<!-- 引用 -->
								<view style="width: 100%;display: flex;">
									<view class="right right-avatar" style="width: 100rpx;">
										
									</view>
									<view v-if="row.msg.content.is_yingyong&&row.msg.content.is_yingyong!=''" class=""
											style="max-width: 470rpx;font-size: 26rpx;background-color:#C9C9C9;border-radius: 5rpx;margin-top: 5rpx;padding: 5rpx;overflow-wrap: break-word; word-wrap: break-word;">
											{{row.msg.content.is_yingyong}}
									</view>
									
								</view>
								
								
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<!-- 抽屉栏 -->
			<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
				<!-- 表情 -->
				<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" :indicator-dots="true" duration="150">
					<swiper-item v-for="(page,pid) in emojiList" :key="pid">
						<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
							<image :src="'/static/img/emoji/' + em.url" :lazy-load="true" />
						</view>
					</swiper-item>
				</swiper>
				<!-- 更多功能 相册-拍照-红包 -->
				<swiper class="more-layer" style="height:50vw" :indicator-dots="true" indicator-active-color="#51c9c3"
					:class="{hidden:hideMore || !hideEmoji}" duration="150">
					<swiper-item>
						<view class="list">
							<view class="list-box" @tap="chooseImage">
								<image class="fun-icon" src="../../static/theme/default/Image.png" mode="heightFix">
								</image>
								<view class="tool_text">相册</view>
							</view>

							<view class="list-box" @tap="camera">
								<image class="fun-icon" src="../../static/theme/default/shooting_icon.png"
									mode="heightFix">
								</image>
								<view class="tool_text">拍摄</view>
							</view>

							<!-- <view class="list-box" @tap="sendPos">
								<image class="fun-icon" src="../../static/theme/default/location_icon.png"
									mode="heightFix">
								</image>
								<view class="tool_text2">位置</view>
							</view> -->
							<view class="list-box" @tap="video">
								<image class="fun-icon" src="../../static/theme/default/camera.png" mode="heightFix">
								</image>
								<view class="tool_text">视频</view>
							</view>

							<view class="list-box" @tap="chooseCard">
								<image class="fun-icon" src="../../static/theme/default/contact_icon.png"
									mode="heightFix">
								</image>
								<view class="tool_text2">名片</view>
							</view>
							<view class="list-box" @tap="handRedEnvelopes">
								<image class="fun-icon" src="../../static/theme/default/envelope_icon.png" mode="heightFix">
							</image>
								<view class="tool_text">红包</view>
							</view>
							<view class="list-box" @tap="chooseChuo">
								<image class="fun-icon" src="../../static/theme/default/tool_icon.png" mode="heightFix">
								</image>
								<view class="tool_text">戳一戳</view>
							</view>
							<view class="list-box" @tap="chooseLike">
								<image class="fun-icon" src="../../static/theme/default/collection_icon.png"
									mode="heightFix">
								</image>
								<view class="tool_text">收藏</view>
							</view>
							<view class="list-box" @tap="chooseFile">
								<image class="fun-icon" src="../../static/theme/default/file_icon.png" mode="heightFix">
								</image>
								<view class="tool_text">文件</view>
							</view>

							<!-- <view class="list-box" @tap="videoCall(2)" v-if="msgList.type == 0">
								<image class="fun-icon" src="../../static/theme/default/video-call.png"
									mode="heightFix">
									<view class="tool_text">语音通话</view>
							</view> -->
							<!-- <view class="list-box" @tap="zhendong" v-if="msgList.type == 1  && is_main">
								<view class="iconfont-im icon-zhendong"></view>
								<view class="tool_text2">振动</view>
							</view> -->
						</view>

					</swiper-item>
				</swiper>
			</view>

			<view class="input-box" v-if="msgList.is_msg">
				<view
					style="text-align: center !important;width:750upx;line-height: 100upx;border-top: #c9c9c9 solid 2upx;">
					全员禁言中...
				</view>
			</view>

			<!-- @touchmove.stop.prevent="discard" -->

			<!-- 底部输入栏 -->
			<view class="input-box" :class="popupLayerClass" v-else>
				<view class="redirect-btn" style="width:100%;" @click="finishRedirect()" v-if="redirectingMsg">
					<button type="primary" plain="true">确认转发({{redirectMsgs.length}})</button>
				</view>
				<!-- H5下不能录音，输入栏布局改动一下 -->
				<!-- #ifndef H5 -->
				<view class="voice">
					<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
				</view>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<view class="more" @tap="showMore">
					<view class="icon add"></view>
				</view>
				<!-- #endif -->

				<view class="textbox">
					<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
						@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
						@touchcancel="voiceCancel">
						{{voiceTis}}
					</view>
					<view class="text-mode" :class="isVoice?'hidden':''">
						<view class="box">
							
							<textarea auto-height="true"  @input="inputText"  :adjust-position="false"
								:value="textMsg" @focus="textareaFocus" :maxlength="-1" :show-confirm-bar="false"
								style="max-height: 190upx;overflow:auto;padding-top: 4px;padding-bottom: 4px; " />
								<!-- <textarea auto-height="true" confirm-type="search" @confirm="sendText" @input="inputText"
									:value="textMsg" @focus="textareaFocus" :maxlength="-1" :show-confirm-bar="false"
									style="max-height: 190upx;overflow:auto;padding-top: 4px;padding-bottom: 4px; " /> -->
						</view>

						<view class="em" @tap="chooseEmoji">
							<view class="icon biaoqing"></view>
						</view>
					</view>
					<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;" v-if="ishuifu" >
						<view class="" style="font-size: 26rpx;width:470rpx;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;padding: 5rpx;background-color:#C9C9C9;border-radius: 5rpx;margin-top: 5rpx;">
						{{yinyong_str}}
							
						</view>
						<span @click="ishuifu=false" style="color:#474747;">❌</span>
					</view>
					
				</view>

				<!-- #ifndef H5 -->
				<view :class="iconShow" @tap="showMore">
					<view class="icon add"></view>
				</view>
				<!-- #endif -->

				<view class="send" :class="sendMsgClass" @tap="sendText">

					<view class="btn">发 送</view>
				</view>
			</view>


		</view>

		<view v-if="showVedio" class="showVedio">

			<video autoplay="true"
				style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);width: 100%;" id="myVideo"
				:src="videoPath" @error="videoErrorCallback">
				<cover-image @tap="showVedio = false" src="/static/theme/default/my/close.png" class="cloneBut">
				</cover-image>
			</video>
		</view>


		<!-- #ifndef H5 -->
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- #endif -->

		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="icon close" @tap="closeRedEnvelope"></view>
						</view>
						<image :src="staticPhoto+redenvelopeData.face" :lazy-load="true"></image>
					</view>
					<view class="from">来自{{redenvelopeData.from}}的红包</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money" @tap="openRed(redenvelopeData)">

						<image :class="luckbtn" src="/static/theme/default/my/red_2.png"
							style="width: 180upx; height: 180upx;">
						</image>
					</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情
						<view class="icon to"></view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup2" :show="videPoup" position="bottom" mode="666">
			<view class="video-but-view">
				<button class="video-but" type="primary" @tap="videoBut('video')" :loading="videoLoading">视频聊天</button>
				<button class="video-but" type="primary" @tap="videoBut('voice')" :loading="voiceLoading">语音聊天</button>
				<button type="default" @click="videPoup=false">取消</button>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="confirm">
			<uni-popup-confirm title="温馨提示" :content="popuMsg" @confirm="confirm"> </uni-popup-confirm>
		</uni-popup>
		<uni-popup ref="qiang" type="qiang">
			<uni-popup-qiang title="开启发包" :status="miaoqiang + ''" :content="popuMsg" @confirm="goQiang">
			</uni-popup-qiang>
		</uni-popup>
		<!-- 上传文件 -->
		<nk-select-file v-model="showUploadFile" @confirm="uploadAFile"></nk-select-file>
		<uni-popup ref="popup_friends" type="bottom">
			<view class="popup_friends" :style="{height:popHeight+'px'}">
				<view class="popup_friends-top">

				</view>
				<select-friend :list_id="list_id" @close="closeFriends">
				</select-friend>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import CacheImage from '../../components/cache-image/cache-image.vue';
	import uniLoadMore from "../../components/uni-ui/uni-load-more/uni-load-more.vue";
	import emoj_data from '../../static/js/message/emoji_data.js';
	import _get from '../../common/_get';
	import _hook from '../../common/_hook';
	import _action from '../../common/_action';
	import _data from '../../common/_data';
	import htmlParser from '../../common/html-parser';
	import uniPopup from '../../components/uni-popup/uni-popup.vue';
	import uniPopupConfirm from '../../components/uni-popup/uni-popup-confirm.vue';
	import uniPopupQiang from '../../components/uni-popup/uni-popup-qiang.vue';
	import textScroll from '../../components/textScroll/textScroll.vue'
	import nkSelectFile from '@/components/nk-select-file/nk-select-file.vue'
	import Marqueen from '@/components/marqueen/index.vue'
	import {
		mapState,
		mapMutations,
	} from 'vuex'

	import selectFriend from './select_friend.vue'

	export default {
		components: {
			CacheImage,
			uniLoadMore,
			uniPopup,
			uniPopupConfirm,
			uniPopupQiang,
			textScroll,
			nkSelectFile,
			selectFriend,
			Marqueen,
		},
		data() {
			return {
				yinyong_str:false,
				ishuifu:false,
				pt:'0',
				redirectingMsg: false,
				redirectMsgs: [],
				actionType: null,
				top_notice: null,
				showRedEnvelop: 1,
				servingState: 3,
				onLine: false,
				showServing: false,
				memberPhotos: [],
				is_main: 0,
				nowReadTime: 1635013026,
				redTimer: null,
				notice: '',
				scrollInfo: {
					input_box_height1: 0,
					input_box_height2: 0,
					totall_height: 0,
				},
				scrollHeight: "0px",
				niming_msg: '匿名',
				videoContext: null,
				videoPath: '',
				showVedio: false,
				receive_list: [],
				luckbtn: '',
				scrollTop: 0,
				chat_id: '',
				//文字消息
				videPoup: false,
				videPlay: false,
				voiceLoading: false,
				videoLoading: false,
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollToView: '',
				msgList: {
					show_name: '',
					list: [],
					type: 0,
					is_msg: 0,
					is_action: 0,
				},
				msgImgList: [],
				noMore: 0,

				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,
				// #ifdef APP-PLUS
				call: uni.requireNativePlugin('TUICallingUniPlugin-TUICallingModule'),
				// #endif
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				emojiList: emoj_data.emoji_list,

				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
				//onlineEmoji: emoj_data.online_emoji,

				//红包相关参数
				windowsState: '',
				redenvelopeData: {
					rid: null, //红包ID
					from: null,
					face: null,
					blessing: null,
					money: null,
					index: null
				},
				list_id: 0,
				my_data: {},
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				call_ret: false,
				my_photo: '',
				callType: 1, //默认视频,
				popuMsg: '',
				payTimer: false,
				type: '',
				Keyboard: 0,
				miaoqiang: 0,
				vendor_status: 0,
				doubleClick: false,
				doubleTime: {
					firstTime: '',
					towTime: '',
					flag: true,
					timer: null,
				},
				group_state: null,
				isOnline: 2, // （0表示离线，1表示在线）
				showUploadFile: false, //上传文件

				send_user_id: '', //@好友的信息

				popHeight: '', //todo弹出选择好友高度

				members: [], //群成员

			};
		},
		// onBackPress(options) {
		// 	//console.log(options)
		// 	uni.navigateTo({
		// 		url: '/pages/chat/index'
		// 	});
		// 	return false;
		// },
		onLoad(option) {

			this.list_id = option.list_id;
			if ("chat_id" in option) {
				this.chat_id = option.chat_id;
			}
			if ("trans" in option) {
				uni.showToast({
					title: '转发成功',
					icon: 'none',
					ducation: 2000,
				});
			}
			//注册事件
			// 注册发送音频事件
			this.regOnStartEvent((e) => {
				this.recordBegin(e);
			});
			// 注册发送音频事件
			this.regSendVoiceEvent((e) => {

				this.recordEnd(e);
			});

			// 注册发送音频事件
			this.regVudioEndEvent((e) => {
				this.playMsgid = null;
			});
			// //语音自然播放结束
			// this.AUDIO.onEnded((res) => {
			//   this.playMsgid = null;
			// });
			//
			// // #ifndef H5
			// //录音开始事件
			// this.RECORDER.onStart((e) => {
			//   this.recordBegin(e);
			// })
			// //录音结束事件
			// this.RECORDER.onStop((e) => {
			//   this.recordEnd(e);
			// })
			// //#endif


		},
		onUnload() {

			/** 这里只保留最新的15条会话记录，以保证初次加载性能 */
			let _this = this;
			let chat_data = this.msgList;
			chat_data.list = chat_data.list.slice(-15);
			_data.localData(this.list_id, chat_data);
			/** 去除当前会话的list_id */
			_data.localData('message_list_id', '');
			/** 暂停语音播放 */
			// this.AUDIO.pause();
			/** 移除监听事件 */
			uni.$off('data_chat_data_unshift');
			uni.$off('data_chat_data_push');
			uni.$off('data_chat_data');
			uni.$off('data_user_info');
			uni.$off('data_chat_data_delete');
			uni.$off('update_text_msg');
			uni.$off('memberJoinRoom');
			uni.$off('closeVoiceRoom');
			clearInterval(_this.timer)
			clearInterval(_this.redTimer);

			if (_data.data('voice_room_type')) {
				_this.$refs.serving.xiaMai(_this.list_id);
			} else {
				_this.$refs.serving && _this.$refs.serving.closeVoiceRoom();
			}
		},
		mounted() {

			let _this = this
			if (this.chat_id) {
				this.$nextTick(() => {
					this.scrollToView = "msg" + this.chat_id
				})
			}
			setTimeout(function() {
				_this.getScrollContentHeight('hide', 0);
			}, 400)
		},
		created() {

		},

		onShow() {
			//console.log('on show');
			this.initData();
		},
		computed: {
			...mapState({
				RECORD: state => state.audio.RECORD,
				AUDIO: state => state.audio.AUDIO,
				RecordTime: state => state.audio.RecordTime,
				KeyboardH: state => state.common.KeyboardHeight,
				custom_font_size: state => state.common.custom_font_size,
			}),
			getServingText() {
				return _data.data('dragInfo').state == 1 ? '下麦' : '上麦';
			},
			myPhoto() {
				return this.my_photo;
			},
			imgRan() {
				return Math.random();
			},
			staticPath() {
				return _data.staticChat();
			},
			staticPath2() {
				return _data.staticChat2();
			},
			
			staticVideoImg() {
				return _data.staticVideoImg()
			},
			staticPhoto() {
				return _data.staticPhoto();
			},
			sendMsgClass() {
				// #ifdef H5
				return (this.isVoice ? 'hidden' : '');
				// #endif
				return (this.isVoice ? 'hidden' : '') || this.textMsg.length ? '' : 'hidden';
			},
			iconShow() {
				return this.textMsg.length ? 'hidden' : 'more';
			},
			systemClass() {
				return this.msgList.type == 1 ? 'sys' : '';
			}
		},
		onReady: function(res) {

			let _this = this;
			if (_this.msgList.type == 1) {
				setTimeout(function() {
					// _this.$refs.scrollNotice.textScroll()
				}, 300);
			}
		},
		methods: {
			...mapMutations(['regSendVoiceEvent', 'regOnStartEvent', 'regVudioEndEvent']),
			redirectMessageCheck(state, msg) {
				let idx = this.findIndexForRedirectMsg(msg);
				if (idx !== -1) {
					this.redirectMsgs.splice(idx, 1);
				} else {
					this.redirectMsgs.push(msg);
				}
			},
			findIndexForRedirectMsg(msg) {
				for (let i = 0; i < this.redirectMsgs.length; i++) {
					if (this.redirectMsgs[i].id == msg.id) {
						return i;
					}
				}
				return -1;
			},
			finishRedirect() {
				if (this.redirectMsgs.length == 0) {
					uni.showToast({
						title: "请先选择转发消息",
						duration: 2000,
					})
					return;
				}
				//console.log('this:', this.msgList, this.list_id);
				let datas = {
					list_id: this.list_id,
					type: this.msgList.type,
					msg_id: this.redirectMsgs,
				};
				let firstMsg = this.redirectMsgs[0];
				uni.setStorageSync('data_msg', JSON.stringify(datas));
				this.redirectingMsg = false;
				this.redirectMsgs = [];
				uni.navigateTo({
					url: '../push/sendallsome?type=' + firstMsg.type + '&content=' + JSON
						.stringify(firstMsg.content),
				});
			},
			// 消息是否是图片
			isImage(con) {
				// //console.log("con",con);
				// 如果是图片，则转换成图片
				let reg =
					/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i;
				let reg2 = RegExp(/data:image\/.*;base64,/)
				if (reg.test(con) || reg2.test(con)) {

					return true;
				} else {

					return false;
				}
			},
			goToNoticeDetail() {
				uni.navigateTo({
					url: '../set/message_more?list_id=' + this.list_id + "&type=notice",
				})
			},
			// 选择要禁言的人
			selectMember(row) {
				//console.log("row", row);
				let user_id = row.msg.user_info.uid + '';
				if (user_id) {
					let i = this.members.indexOf(user_id);
					if (i > -1) {
						this.members.splice(i, 1);
					} else {
						this.members.push(user_id);
					}
				}
				let _this = this;
				_this.$httpSend({
					path: '/message/setGroupAdmin',
					data: {
						users: JSON.stringify(_this.members),
						list_id: _this.list_id,
						type: 2
					},
					success_action: true,
					success(res) {
						row.showAction = false;
						_this.$forceUpdate();
						// 禁言
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}
				});
			},
			// 选择要剔出的人
			selectRemoveMember(row) {
				//console.log("row", row);
				let user_id = row.msg.user_info.uid;
				if (user_id) {
					let i = this.members.indexOf(user_id);
					if (i > -1) {
						this.members.splice(i, 1);
					} else {
						this.members.push(user_id);
					}
				}
				let _this = this;
				_this.$httpSend({
					path: '/message/removeChat',
					data: {
						users: JSON.stringify(_this.members),
						list_id: _this.list_id,
					},
					success_action: true,
					success(res) {
						row.showAction = false;
						_this.$forceUpdate();
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none',
						});
					}
				});
			},
			// 所有群成员
			getGroupMembers(row) {
				let _this = this;
				_this.$httpSend({
					path: '/message/getGroupAdmin',
					data: {
						list_id: this.list_id,
						type: 2
					},
					success(data) {
						_this.members = data.user_ids;
						//console.log("_this.members", _this.members);
						row.showAction = true;
						_this.$forceUpdate();
					}
				});
			},
			// todo 长按显示面板
			showAction(row) {
				this.msgList.list.map(item => {
					item.showAction = false;
				})
				this.getGroupMembers(row);
			},
			// todo 长按头像@好友
			addFriendChat(msg) {
				msg.showAction = false;
				this.textMsg = this.textMsg + '@' + msg.msg.user_info.name + ' ';
				if (!this.send_user_id) {
					this.send_user_id = msg.msg.user_info.uid;
				} else {
					this.send_user_id = this.send_user_id + "," + msg.msg.user_info.uid;
				}
			},
			closeFriends() {
				this.$refs.popup_friends.close();
			},
			// 初始化数据
			initData() {


				let _this = this;






				let chat_data = _data.localData(_this.list_id);
				_this.msgList = chat_data;

				_get.base(function() {
					_this.showRedEnvelop = _data.data('red_envelope');
				});

				_get.getChatData({
					send_data: {
						list_id: this.list_id,
						time: 0,
						is_up: 1,
					},
					is_action_data: 1,
					callback: function(chatData) {

						_this.top_notice = chatData.top_notice;
					}
				});
				_hook.routeSonHook();
				// todo 选择@好友高度
				this.popHeight = uni.getSystemInfoSync().windowHeight;

				/** 先移除监听事件（避免重复触发消息） */
				uni.$off('remove_member');
				uni.$off('group_delete_chat');
				uni.$off('chat_del');
				uni.$off('data_chat_data_unshift');
				uni.$off('data_chat_data_push');
				uni.$off('data_chat_data');
				uni.$off('data_user_info');
				uni.$off('data_chat_data_delete');
				uni.$off('update_text_msg');
				uni.$off('memberJoinRoom');
				uni.$off('closeVoiceRoom');
				uni.$off('newReadTime');
				clearInterval(_this.timer)
				clearInterval(_this.redTimer)
				_this.getReadTime();
				uni.$on('newReadTime', function(time) {
					_this.nowReadTime = time;
				});
				_this.my_photo = _data.data('cache').local_photo;


				_this.my_data = _data.data('user_info');
				_this.top_notice = chat_data.top_notice;
				if (chat_data && chat_data.list.length) {
					_this.scrollAnimation = false;
					// TODO 图片列表
					//console.log(chat_data);
					let msg = "";
					if (chat_data.online == 1) {
						msg = "(在线)"
					} else {
						msg = "(离线)"
					}
					uni.setNavigationBarTitle({
						title: chat_data.show_name + (chat_data.type == 1 ? '' : msg),
					});
					_this.addMsgImgList(chat_data.list);
					chat_data.list = _this.msgDataHandle(chat_data.list);

					_this.receive_list = _this.msgList.receive_list
					/** 滚动到指定位置 */
					setTimeout(function() {
						_this.$nextTick(function() {
							_this.scrollTop = (new Date()).getTime();
							console.log((new Date()).getTime(),'scrollTop')
							// _this.scrollToView = 'msg' + data[data.length - 1].msg.id;
						});
					}, 400)
					/** 如果是群聊要实时检测群有无禁言 */
					_this.type = chat_data.type;
					if (chat_data.type == 1) {
						_this.getGroupSteate();
					}
				} else {
					_get.getChatData({
						send_data: {
							list_id: _this.list_id,
							time: 0,
							is_up: 1,
						},
						is_action_data: 1,
					});
				}

				/** 添加当前的会话list_id */
				_data.localData('message_list_id', this.list_id);

				/** 监听会话数据变化 */
				uni.$on('data_chat_data_unshift', function(data) {
					data = _this.msgDataHandle(data);
					_this.scrollAnimation = false;
					let position_id = _this.msgList.list[0].msg.id;
					_this.msgList.list.unshift(...data);
					/** 滚动到指定位置 */
					_this.$nextTick(function() {
						_this.scrollToView = 'msg' + position_id;
					});
					// TODO 图片列表
					//console.log("图片列表", _this.msgList);
				});
				/** 监听会话数据变化 */
				uni.$on('data_chat_data_push', function(data) {
					_this.setReadTime();

					/** 保持页面15条数据，提升性能 */
					_this.noMore = 0;

					data = _this.msgDataHandle(data);

					_this.scrollAnimation = true;
					_this.msgList.list = data;
					// TODO 图片列表
					//console.log("图片列表", _this.msgList);
					_this.receive_list = _this.msgList.receive_list;
					/** 滚动到指定位置 */
					setTimeout(function() {
						_this.$nextTick(function() {
							// _this.scrollTop =(new Date()).getTime();
							_this.scrollTop = (new Date()).getTime();
							console.log((new Date()).getTime(),'scrollTop11')
							// _this.scrollToView = 'msg' + data[data.length - 1].msg.id;
						});
					}, 400)

				});
				/** 监听撤回消息 */
				uni.$on('data_chat_data_delete', function(list) {
					_this.msgList.list = list;
					// TODO 图片列表
					//console.log("图片列表", _this.msgList);
				});
				/** 监听会话数据变化 */
				uni.$on('data_chat_data', function(data) {
					let msg = "";
					if (data.online == 1) {
						msg = "(在线)"
					} else {
						msg = "(离线)"
					}
					uni.setNavigationBarTitle({
						title: data.show_name + (_this.msgList.type == 1 ? '' : msg),
					});
					data.list = _this.msgDataHandle(data.list);
					_this.scrollAnimation = false;
					//console.log(data);return;
					_this.msgList = data;
					// TODO 图片列表
					//console.log("图片列表", _this.msgList);
					_this.receive_list = _this.msgList.receive_list;

					if (_this.msgList.type == 1) {
						_this.getGroupSteate();
					}
					/** 滚动到指定位置 */
					_this.$nextTick(function() {
						// _this.scrollTop =(new Date()).getTime();
						// _this.scrollToView = 'msg' + data.list[data.list.length - 1].msg.id;
						_this.scrollTop = (new Date()).getTime();
					});
				});
				/** 监听新的个人数据 */
				uni.$on('data_user_info', function(data) {
					_this.my_data = data;
					_this.my_photo = _data.staticPhoto() + _this.my_data.photo
				});
				//监听键盘高度变化
				uni.onKeyboardHeightChange(res => {
					console.log("软键盘高度变化", res);
					_this.Keyboard = res.height;

					if (res.height) {
						//todo @好友软键盘高度变化
						this.popHeight = uni.getSystemInfoSync().windowHeight - res.height;
						_this.getScrollContentHeight("show", 0);
					} else {
						this.popHeight = uni.getSystemInfoSync().windowHeight;
						_this.getScrollContentHeight("hide", 0);
					}
				});
				uni.$on('update_text_msg', function(res) {

					_this.textMsg += res.msg;
					//todo @好友  如果消息不为空，
					_this.$refs.popup_friends.close();
					if (!_this.send_user_id) {
						_this.send_user_id = res.user_id;
					} else {
						_this.send_user_id = _this.send_user_id + "," + res.user_id;
					}
				});

				uni.$on('memberJoinRoom', function(res) {
					_this.$refs.serving.memberJoin(_this.list_id, function() {
						_this.onLine = true;
						_this.showServing = true;
					})
				})
				uni.$on('closeVoiceRoom', function(res) {
					_this.$refs.serving.closeVoiceRoom()
				})
				_get.getMemberPhotos({
					list_id: _this.list_id
				}, function(ret) {
					_this.memberPhotos = ret
				});
				// 监听清空消息
				uni.$on('chat_del', function(res) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '消息被清空',
						success: function(res) {

						}
					});
					_this.msgList = [];
				})
				// 监听消息清空
				uni.$on('group_delete_chat', function(list_id) {
					_this.msgList = [];
					_get.getChatData({
						send_data: {
							list_id: _this.list_id,
							time: 0,
							is_up: 1,
						},
						is_action_data: 1,
					});
				})
				// 监听踢出会员重新获取消息
				uni.$on('remove_member', function(list_id) {
					_this.msgList = [];
					_data.localData(list_id, null);
					_this.initData();
				})
				//收到信息 回传
				this.setReadTime();
			},
			// 选择收藏
			chooseLike() {
				this.hideDrawer(1); //隐藏抽屉
				uni.navigateTo({
					url: '/pages/my/store?choose_collect=1'
				})
			},
			// 下载文件
			downFile(file) {
				uni.downloadFile({
					url: file,
					success: (data) => {
						if (data.statusCode === 200) {
							//console.log('下载成功');
							uni.saveFile({
								tempFilePath: data.tempFilePath,
								success(res) {
									uni.showModal({
										title: '下载成功',
										content: '文件已保存:' + res.savedFilePath,
										success: (res_) => {

										}
									})
								}
							})
						}
					}
				})
			},
			// 打开地图
			openMap(pos) {
				uni.openLocation({
					latitude: pos.latitude,
					longitude: pos.longitude,
					name: pos.name,
					address: pos.address,
				})
			},
			uploadAFile(data) {
				//console.log("data", data);
				let _this = this;
				for (let i = 0; i < data.length; i++) {
					let msg = {
						url: data[i].url,
						name: data[i].name,
						length: parseInt(data[i].sizeMB * 1024),
					}
					_this.sendMsg(msg, 11);
				}
			},
			// 上传文件
			chooseFile() {
				const _this = this;
				_this.hideDrawer(1); //隐藏抽屉
				// #ifdef H5
				uni.chooseFile({
					success: function(res) {
						//console.log("res", res);
						//console.log("size", parseInt(res.tempFiles[0].size / 1024));
						//console.log(JSON.stringify(res.tempFilePaths));
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let msg = {
								url: res.tempFilePaths[i],
								name: res.tempFiles[i].name,
								length: parseInt(res.tempFiles[i].size / 1024),
							}
							_this.sendMsg(msg, 11);
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				this.showUploadFile = true;
				// #endif

			},
			// 戳一戳
			chooseChuo() {
				this.sendChuoYiChuoMsg();
			},
			// 发送位置
			sendPos() {
				// let _this = this;
				// uni.chooseLocation({
				// 	success: function(res) {
				// 		let msg = {
				// 			latitude: res.latitude,
				// 			longitude: res.longitude,
				// 			name: res.name,
				// 			address: res.address,
				// 		};
				// 		_this.sendMsg(msg, 10);
				// 	}
				// })
			},

			getHtml(content) {

				return htmlParser(content);
			},

			inputText(e) {
				//截取最后一位
				// e.preventDefault();
				let str = e.detail.value;
				// todo @好友
				if (str === '') {
					this.send_user_id = '';
				}
				let length1 = str.length;
				let key = str.substr(length1 - 1, 1);
				if (key && key == '@' && this.msgList.type == 1 && length1 > this.textMsg.length) {
					this.textMsg = str;
					//console.log('跳转到群成员列表');
					// TODO群成员弹窗
					// 关闭输入框
					uni.hideKeyboard();
					this.$refs.popup_friends.open();
					// uni.navigateTo({
					// 	url: '/pages/chat/group_list?list_id=' + this.list_id,
					// 	animationType: "slide-in-bottom"
					// });
					return true;
				}
				this.textMsg = str;

			},
			getScrollContentHeight(type = 'show', not_return = 1) {

				let _this = this;
				let query = uni.createSelectorQuery();
				query.select('.more-layer').boundingClientRect();
				query.select('.input-box').boundingClientRect();
				uni.getSystemInfo({
					success: function(res) {
console.log(res.windowHeight,'res.windowHeight')
						_this.scrollInfo.totall_height = res.windowHeight;
						query.exec(data => {
							if (data[0] && data[1]) {
								_this.scrollInfo.input_box_height1 = data[0].height || 0;
								_this.scrollInfo.input_box_height2 = data[1].height || 0;
							}
								console.log(_this.scrollInfo.input_box_height1,'input_box_height1')
								console.log(_this.scrollInfo.input_box_height2,'input_box_height2')

							_this.autoHeight(type, not_return)
						})
					}
				})
			},
			autoHeight(type, not_return) {
				let _this = this;
				if (type == 'show') {
					// this.scrollHeight = _this.scrollInfo.totall_height
					// if (this.Keyboard) {

					// 	this.scrollHeight = (_this.scrollInfo.totall_height - _this.Keyboard - _this.scrollInfo
					// 			.input_box_height2-45) +
					// 		'px';
					// 		// this.scrollHeight = (_this.scrollInfo.totall_height - _this.Keyboard - _this.scrollInfo
					// 		// 		.input_box_height2-45) +
					// 		// 	'px';
					// } else {
					// 	this.scrollHeight = (_this.scrollInfo.totall_height - _this.scrollInfo.input_box_height1 - _this
					// 		.scrollInfo
					// 		.input_box_height2-45) + 'px';
					// }
					// _this.scrollTop=(new Date()).getTime();
					// console.log((new Date()).getTime(),'scrollTop')
					// _this.$nextTick(function() {
					// 	// _this.scrollTop =(new Date()).getTime();
					// 	// _this.scrollToView = 'msg' + data.list[data.list.length - 1].msg.id;
					// 	_this.scrollTop = (new Date()).getTime();
					// });
					// this.pt=_this.Keyboard+'px';
					uni.pageScrollTo({
					  scrollTop:_this.Keyboard,
					  duration: 0
					});
					// uni.pageScrollTo({
					//   scrollTop:_this.Keyboard,
					//   duration: 0
					// });
				} else {
					//content高度 = 屏幕高度-tool高度
					uni.getSystemInfo({
						success: function(res) {
							res.windowHeight = res.windowHeight;
							if (_this.Keyboard) {
								_this.scrollHeight = (res.windowHeight - _this.scrollInfo.Keyboard - _this
									.scrollInfo
									.input_box_height2-45) + 'px'
							} else {
								_this.scrollHeight = (res.windowHeight - _this.scrollInfo.input_box_height2-45) +
									'px'
							}
						}
					});
					// this.scrollHeight = '100%'
				}
				
			
				// _this.scrollTop ='200px';
				// if (not_return == 0) {

				// 	this.$nextTick(() => {
				// 		// _this.scrollTop = 0;
				// 		_this.scrollTop =_this.scrollHeight;
				// 	})
				// }
			},
			getGroupSteate() {
				let _this = this;
				this.$httpSend({
					path: '/action/groupState',
					data: {
						list_id: _this.list_id
					},
					success(res) {

						_this.msgList.is_msg = res.is_msg;
						_this.msgList.is_action = res.is_action;
						_this.msgList.can_add_friend = res.can_add_friend;
						_this.msgList.is_niming = res.is_niming;
						_this.niming_msg = res.is_niming == 0 ? '匿名' : '退出匿名';
						_this.miaoqiang = res.miaoqiang;
						_this.vendor_status = res.vendor_status;
						_this.notice = res.notice;
						_this.is_main = res.is_main;
						_this.group_state = res

						if (_this.miaoqiang && _this.is_main && res.qiang_time > 0) {
							_this.autoFaRed(res.qiang_time)
						}
						if (res.voice_room_state) { //有人发起语音则自动加入
							//加入视频
							_this.$refs.serving.memberJoin(_this.list_id, function() {
								_this.onLine = true;
							});
						}

					}
				});
			},
			videoErrorCallback(e) {
				//console.log(e)
			},
			autoVideo1(msg) {
				return _data.staticChat() + this.list_id + "/" + msg.content.url;
			},
			autoVideo(msg) {
				//console.log('点击了视频')
				this.showVedio = true;
				this.videoPath = _data.staticChat() + this.list_id + "/" + msg.content.url;
			},
			getCard(msg) {

				if (msg.content.user_id != undefined) {
					uni.navigateTo({
						url: '/pages/details/index?in=1&user_id=' + msg.content.user_id
					})
				}
			},
			chooseCard() {
				uni.navigateTo({
					url: './message/card_list?list_id=' + this.list_id
				});
			},
			imageError(e) {
				// this.my_photo = _data.staticPhoto() + '/default_photo_path.png';

				let index = e.currentTarget.dataset.id;
				//替换index对应的图片

				this.msgList.list[index].msg.user_info.face = '';
			},
			imageError2(e) {
				this.my_photo = _data.staticPhoto() + '/default_photo_path.png';
			},
			scrollToDom() {
				let that = this;
				let query = uni.createSelectorQuery();
				query.select('#msg' + that.chat_id).boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
					that.style.mitemHeight = 0;

					let rect = res[0];
					that.style.mitemHeight = that.style.mitemHeight + rect.height + 40;
					if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
						that.scrollTop = that.style.mitemHeight - that.style
							.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
					}
				});
			},
			//
			//发起视频聊天
			videoBut(type) {
				let content_type = 6;
				this.call_ret = false;
				if (type === 'voice') {
					this.voiceLoading = true;
					content_type = 7;
				} else {
					this.videoLoading = true
				}
				let _this = this

				this.$httpSend({
					path: '/message/sendVideo',
					data: {
						list_id: this.list_id,
						content_type: content_type,
						_token: uni.getStorageSync('token')
					},
					success_action: true,
					success(res) {
						if (res.err === 0) {
							//图片转化
							res.data.myavatar = _this.staticPhoto + res.data.myavatar;
							res.data.avatar = _this.staticPhoto + res.data.avatar;
							_this.getVideo(res.data);
						} else {

						}

					}
				});
			},
			//调用视频/音频
			getVideo(data) {
				//console.log("调用腾讯云data", data);
				let _this = this;
				_this.call.groupCall({
					type: data.callType == 'voice' ? 1 : 2,
					groupID: '',
					userIDList: data.user_ids
				}, ret => {
					this.doubleClick = false;
					//console.log(data)
					//console.log(ret)
					//console.log("9909090909090")
					if (ret) {
						_this.videPoup = false;
						_this.voiceLoading = false;
						if (ret.code == 5 && !_this.payTimer) {
							//console.log('发起付费');
							//先扣一次
							_get.payVideoAamount({
								list_id: _this.list_id
							}, function(res) {
								//console.log(res);
							}, function(res) {
								//console.log(res);
							})
							_this.payTimer = setInterval(function() {
								_get.payVideoAamount({
									list_id: _this.list_id
								}, function(res) {
									//console.log(res);
								}, function(res) {
									//console.log(res);
									clearInterval(_this.payTimer); //取消收费
									_this.payTimer = false;
								})
							}, 60000);
						}
						if (ret.code == 1 && ret.time != undefined) { //对方或者自己取消
							data.time = ret.time;
							data.ret_code = ret.code;
							//console.log(JSON.stringify(data));
							_get.cancelCall(data, function(res) {});
						}
					}

				});
			},
			// 发起视频通话
			videoCall(type) {
				//判断是否开启语音和视频计费
				let _this = this;
				_this.callType = type;
				_get.getVedioPayConfig({}, function(ret) {
					let msg1 = '在线视频通话每分钟' + ret.vedio + '元';
					let msg2 = '在线语音通话每分钟' + ret.voice + '元';
					_this.popuMsg = msg1;
					let amount = _this.type == 1 ? ret.vedio : ret.voice;
					if (_this.my_data.money < amount) {
						uni.showToast({
							title: "账号余额不足以支付1分钟在线" + (_this.type == 1 ? '视频' : '语音') + '通话',
							duration: 3000,
							icon: "none"
						})
						return false;
					}
					if (type == 2) _this.popuMsg = msg2
					if (ret.vedio > 0 || ret.voice > 0) {
						_this.$refs.popup.open();
						return true;
					}
					_this.confirm()
				})

				// this.videPoup = true
				// this.hideDrawer();
			},
			confirm() {
				if (this.doubleClick) return false;
				this.doubleClick = true;
				if (this.callType == 1) {
					this.videoBut('video');
				} else {
					this.videoBut('voice');
				}
				this.$refs.popup.close();
			},
			msgDataHandle(data, type) {

				for (let i = 0, j = data.length, msg_img; i < j; i++) {
					if (data[i].type == 0 && data[i].msg.type == 2) {
						// msg_img = this.staticPath + this.list_id + '/' + data[i].msg.content.url.replace('_thumb', '');
						msg_img = this.staticPath2 + data[i].msg.content.full_url;
	

						if (type) {
							this.msgImgList.unshift(msg_img);
						} else {
							this.msgImgList.push(msg_img);
						}
						data[i].msg.content = this.setPicSize(data[i].msg.content);
					} else if (data[i].type == 0 && data[i].msg.type == 0) {

						data[i].msg.content.text = this.replaceEmoji(data[i].msg.content.text);
					}
				}

				return data;
			},
			// 所有图片列表
			addMsgImgList(data) {
				this.msgImgList = [];
				for (let i = 0, j = data.length, msg_img; i < j; i++) {
					if (data[i].type == 0 && data[i].msg.type == 2) {
						this.msgImgList.push(this.staticPath2 + data[i].msg.content.full_url);
						// this.msgImgList.push(this.staticPath + this.list_id + '/' + data[i].msg.content.url.replace(
						// 	'_thumb', ''));
					}
				}
			},
			timestampFormat(time) {
				return _action.timestampFormat(time);
			},
			msgAction(id, user_id, content, type,name) {
				let _this = this;
				// switch (_this.msgList.type) {
				//   case 0:
				//     if (user_id != _this.my_data.id) {
				//       return;
				//     }
				//     break;
				//   case 1:
				//     if (_this.msgList.is_action == 0 && user_id != _this.my_data.id) {
				//       return;
				//     }
				//     break;
				//   default:
				//     return;
				//     break;
				// }
				let itemList = ['撤回', '收藏', '转发', '复制','回复'];

				if (_this.msgList.is_action != 0 && _this.msgList.type == 1) {
					itemList.push('撤回用户所有发言');
				}
				// itemList.push('回复');
				uni.showActionSheet({
					itemList: itemList,
					success: function(res) {
						console.log(res,'选中的---')
						switch (res.tapIndex) {

							// 撤回
							case 0:
								_this.$httpSend({
									path: '/message/withdraw',
									data: {
										list_id: _this.list_id,
										type: _this.msgList.type,
										msg_id: id,
									},
									success_action: true,
									success(res) {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500
										});
									}
								});
								break;
							case 1:
								//console.log("收藏");
								_this.$httpSend({
									path: '/vendor/saveStore',
									data: {
										list_id: _this.list_id,
										type: _this.msgList.type,
										msg_id: id,
									},
									success_action: true,
									success(res) {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500
										});
									}
								});
								break;
							case 2:
								//console.log("转发");
								_this.redirectingMsg = true;
								//console.log('转发:', content, type);
								// let datas = {
								// 	list_id: _this.list_id,
								// 	type: _this.msgList.type,
								// 	msg_id: id
								// };
								// uni.setStorageSync('data_msg', JSON.stringify(datas));
								// uni.navigateTo({
								// 	url: '../push/sendallsome?type=' + type + '&content=' + JSON
								// 		.stringify(content),
								// });
								break;
								//收藏
							case 3:
								//console.log("复制", content);
								if (type == 0) {
									let reg = /<\/?.+?\/?>/g;
									let str = content.text;
									str = str.replace(reg, '');
									uni.setClipboardData({
										data: str,
										success: function() {
											uni.showToast({
												icon: 'none',
												title: '复制成功'
											})
										},
										fail: function() {
											uni.showToast({
												icon: 'none',
												title: '复制失败'
											})
										}
									});
								} else {
									uni.showToast({
										icon: 'none',
										title: '不支持该类消息复制'
									})
								}

								break;

							case 4:
								console.log('引用回复');
								let reg = /<\/?.+?\/?>/g;
								let str = content.text;
								str = str.replace(reg, '');
								_this.yinyong_str=name+":"+str
								_this.ishuifu=true
								break;
								
							case 5:
									//console.log('撤回用户发言');
									let sendData = {
										list_id: _this.list_id,
										type: 2, // 固定2
										msg_id: user_id
									};
									_get.cancelUserAllMessage(sendData, function(res) {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500
										});
									});
									break;

							default:
								break;
						}
					},
					fail: function(res) {
						////console.log(res.errMsg);
					}
				});
			},
			copyToClipboard(str) {
				const el = document.createElement('textarea');
				el.value = str;
				el.setAttribute('readonly', '');
				el.style.position = 'absolute';
				el.style.left = '-9999px';
				document.body.appendChild(el);
				const selected =
					document.getSelection().rangeCount > 0 ?
					document.getSelection().getRangeAt(0) :
					false;
				el.select();
				document.execCommand('copy');
				document.body.removeChild(el);
				if (selected) {
					document.getSelection().removeAllRanges();
					document.getSelection().addRange(selected);
				}
			},
			goDetails(user_id, row) {
				/** 如果是群聊，没有权限的话，查看不了其他会员信息 */
				if (this.msgList.type == 1 && this.msgList.can_add_friend == 1 && this.msgList.is_action == 0) {
					uni.showToast({
						title: '没有权限查看',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				uni.navigateTo({
					url: ('../details/index?user_id=' + user_id),
				})
			},

			// 接受消息(筛选处理)
			screenMsg(msg) {
				//从长连接处转发给这个方法，进行筛选处理
				if (msg.type == 2) {
					//已读信息
					this.nowReadTime = msg.msg.time;
				} else if (msg.type == 1) {
					// 系统消息
					switch (msg.msg.type) {
						case 0:
							this.addSystemTextMsg(msg);
							break;
						case 5:
							this.addSystemRedEnvelopeMsg(msg);
							break;
					}
				} else if (msg.type == 0) {
					// 用户消息
					switch (msg.msg.type) {
						case 0:
							this.addTextMsg(msg);
							break;
						case 1:
							this.addVoiceMsg(msg);
							break;
						case 2:
							this.addImgMsg(msg);
							break;
						case 5:
							this.addRedEnvelopeMsg(msg);
							break;
					}
					////console.log('用户消息');
					//非自己的消息震动
					if (msg.msg.user_info.uid != this.my_data.id) {
						////console.log('振动');
						uni.vibrateLong();
					}
					//收到信息 回传
					this.setReadTime();
				}
				let _this = this
				this.$nextTick(function() {
					// 滚动到底
					_this.scrollTop = (new Date()).getTime();
				});
			},
			getReadTime() {
				var _this = this;
				this.$httpSend({
					path: '/message/getListTime',
					data: {
						list_id: this.list_id
					},
					success_action: true,
					success(res) {

						_this.nowReadTime = res.read_time;


					}
				});
			},
			setReadTime() {
				this.$httpSend({
					path: '/message/setListTime',
					data: {
						list_id: this.list_id
					},
					success_action: true,
					success(res) {
						// //console.log(res)
					}
				});
			},

			//触发滑动到顶部(加载历史信息记录)
			loadHistory() {
				if (this.isHistoryLoading || this.noMore) {
					return;
				}
				let _this = this;
				this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求

				_get.getChatData({
					send_data: {
						list_id: _this.list_id,
						time: _this.msgList.list[0].msg.time,
						is_up: 0,
					},
					callback(data) {
						if (data.list.length < 15) {
							_this.noMore = 1;
						}
						_this.isHistoryLoading = false;
					},
					is_action_data: 0,
				});
			},

			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
					let url_array = content.url.split('.');
					if (content.url.indexOf('_thumb.') == -1) {
						content.url = url_array[0] + '_thumb.' + url_array[1];
					}
				}
				return content;
			},
			//更多功能(点击+弹出)
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer() {
				let _this = this;
				this.popupLayerClass = 'showLayer';
				this.hideMore = false;
				setTimeout(function() {
					//console.log("scorll...")
					_this.getScrollContentHeight('show', 0);
				}, 150)
			},
			// 隐藏抽屉
			hideDrawer(not_return = 0, type = "hide") {
				//判断时间
				if (not_return == 3) {
					let time = (new Date()).getTime();
					if (this.doubleTime.flag) {
						this.doubleTime.firstTime = time
						this.doubleTime.flag = false;
					} else {
						this.doubleTime.towTime = time
						this.doubleTime.flag = true;
					}
					let timeBucket = this.doubleTime.towTime - this.doubleTime.firstTime;
					//console.log('timeBucket:', timeBucket)
					if (timeBucket < 200 && this.doubleTime.flag) {
						//第二次进来
						clearTimeout(this.timer);
						this.doubleTime.towTime = '';
						this.doubleTime.firstTime = '';
						// this.sendChuoYiChuoMsg();
						// this.textMsg = '[戳一戳]'
						// this.sendMsg(this.textMsg, 0);
						// this.textMsg = ''
						// //发送戳一戳
						return false;
					}
					let _this = this;
					this.timer = setTimeout(function() {
						_this.toHideDrawer(not_return, type)
					}, 280)
				} else {
					this.toHideDrawer(not_return, type)
				}
			},
			sendChuoYiChuoMsg() {
				_get.sendChuoYiChuoMsg({
					list_id: this.list_id
				}, function() {

				})
			},
			toHideDrawer(not_return = 0, type = "hide") {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
					this.getScrollContentHeight(type, not_return);
				}, 150);
			},
			// 选择图片发送
			chooseImage() {
				this.getImage('album');
			},
			//拍照发送
			camera() {
				this.getImage('camera');
			},
			//拍摄视频发送
			video() {
				uni.chooseVideo({
					success: (res) => {
						let min = parseInt(res.size / 60),
							sec = res.size % 60;
						min = min < 10 ? '0' + min : min;
						sec = sec < 10 ? '0' + sec : sec;
						let msg = {
							url: res.tempFilePath,
							length: (min + ':' + sec)
						};
						this.sendMsg(msg, 3);
					}
				})
			},
			//发红包
			handRedEnvelopes() {
				// this.hideDrawer(1);
				//console.log(111)
				let url = 'message/hand?list_id=' + this.list_id + '&msg_type=' + this.msgList.type;
				if (this.vendor_status) url = 'message/hand_pin?list_id=' + this.list_id + '&msg_type=' + this.msgList
					.type;;
				uni.navigateTo({
					url: url
				});
			},
			//转账
			transfers() {
				//TODO跳转到转账页面
			},

			//选照片 or 拍照
			getImage(type) {
				this.hideDrawer(1);
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									////console.log(image.width);
									////console.log(image.height);
									let msg = {
										url: res.tempFilePaths[i],
										w: image.width,
										h: image.height
									};
									this.sendMsg(msg, 2);
								}
							});
						}
					}
				});
			},
			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},

			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus() {
				let _this = this;
				_this.hideDrawer(0, 'show');
				return;
				if (_this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					_this.hideDrawer();
				}
			},

			// 发送文字消息
			sendText() {
				// this.hideDrawer(1); //隐藏抽屉
				if (!this.textMsg) {
					return;
				}
				this.sendMsg('', 0);
				//清空输入框
				this.textMsg = '';
			},

			//替换表情符号为图片
			replaceEmoji(str) {
				str = str ? str : '';
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					// //console.log("item: " + item);
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let imgstr = '<img style="width:22px;height:22px;" src="' + './static/img/emoji/' +
									EM.url + '">';
								// //console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				// display: flex;
				// return '<div style="align-items: center;word-break:break-all;">' + replacedStr + '</div>';
				return replacedStr
			},
			showQiang() {
				this.$refs.qiang.open();
			},
			autoFaRed(num) {
				let _this = this;
				let time = num * 1000;
				if (time <= 0) return false;
				if (_this.timer) clearInterval(_this.redTimer);
				_this.redTimer = setInterval(function() {
					_get.autoBigRed({
						list_id: _this.list_id
					}, function() {})
				}, num * 1000)
			},
			goQiang(e) {
				let _this = this;
				e.list_id = _this.list_id;
				_get.updateMiaoqiang(e, function(res) {
					_this.miaoqiang = e.status;
					//console.log(e)
					if (e.status == 1) {
						//console.log('发包.......')
						_this.autoFaRed(e.num)
					} else {
						clearInterval(_this.redTimer);
					}
					setTimeout(function() {
						uni.showToast({
							title: '操作成功',
							duration: 2000
						});
						_this.$refs.qiang.close();
					}, 500)
				});
			},
			// 发送消息
			sendMsg(content, type) {
				// uni.showLoading();
				let _this = this,
					sendMsg = content;
				((callback) => {

					switch (type) {
						/** 文字/表情消息 */
						case 0:
							// let msg = this.textMsg.replace(/</g, '&lt;');
							let msg = this.textMsg.replace(/\n/g, "<br/>");
							// msg = msg.replace(/\\/g, "<br/>");
							console.log(msg)
							sendMsg = {
								text: msg,
								is_yingyong:this.yinyong_str
							};
							// todo @好友
							if (_this.send_user_id) {
								sendMsg.user_id = _this.send_user_id;
							}
							callback();
							break;
							/** 语音/图片/视频/文件 */
						case 1:
						case 2:
						case 3:
						case 4:
							uni.showLoading({
								title: '发送中'
							})
							_this.$httpSendFile({
								type: 0,
								local_url: sendMsg.url,
								data: {
									'list_id': _this.list_id,
								},
								success(data) {
									//console.log("数据", data);

									uni.hideLoading();
									sendMsg.url = data.save_name;
									sendMsg.full_url = data.full_url;
									sendMsg.full_movie = data.full_movie;
									if ('save_gif_path' in data) sendMsg.save_pic_path = data.save_gif_path;
									//console.log('success');
									callback();
								}
							});
							break;
							/** 红包消息 */
						case 5:
							break;

						case 10:
							// 地图
							sendMsg = content;
							callback();
							break;
						case 11:
							// 文件
							uni.showLoading({
								title: '发送中'
							})
							_this.$httpSendFile({
								type: 0,
								local_url: sendMsg.url,
								data: {
									'list_id': _this.list_id,
								},
								success(data) {
									//console.log("数据");

									uni.hideLoading();
									sendMsg.url = data.save_name;
									sendMsg.full_url = data.full_url;
									sendMsg.full_movie = data.full_movie;
									if ('save_gif_path' in data) sendMsg.save_pic_path = data.save_gif_path;
									//console.log('success');
									callback();
								}
							});
							break;
						default:
							break;
					}
				})(() => {
					//todo @好友 发送后清空user_id
					_this.send_user_id = '';
					// console.log(JSON.stringify(sendMsg));return;
					_this.$httpSend({
						path: '/message/textMsg',
						data: {
							list_id: _this.list_id,
							content_type: type,
							// content: JSON.stringify(sendMsg).replace(/<br\/?>/g, '\n'),
							content: JSON.stringify(sendMsg),
						},
						success_action: true,
						success(res) {
							// uni.hideLoading();
							switch (res.err) {
								case 0:
									if (type == 1) {
										_action.playVoice('/static/voice/voice.mp3');
									}
									break;
								case 1:
									uni.showModal({
										title: '好友提示',
										confirmText: '发送好友申请',
										content: res.msg,
										success: function(res) {
											if (res.confirm) {
												uni.navigateTo({
													url: ('../friend/apply?user_id=' +
														_data.localData(_this.list_id)
														.obj_id +
														'&is_type=0'),
												});
											}
										}
									});
									break;
								case 2:
									uni.showModal({
										content: res.msg,
									});
									let data = _data.localData(data.list_id);
									data.is_msg = 1;
									_this.msgList.is_msg = 1;
									_data.localData(data.list_id, data);
									break;
								case 3:
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
									break;
								default:
									break;
							}
						}
					});
				});
			},

			// 添加文字消息到列表
			addTextMsg(msg) {
				this.msgList.list.push(msg);
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.list.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				// this.msgImgList.push(this.staticPath + this.list_id + '/' + msg.content.url.replace('_thumb', ''));
				this.msgImgList.push(this.staticPath2 + msg.content.full_url);
				msg.msg.content = this.setPicSize(msg.msg.content);
				this.msgList.list.push(msg);
				//console.log("this.msgImgList", this.msgImgList);
				//console.log("this.msgList", this.msgList);
			},
			addRedEnvelopeMsg(msg) {
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg) {
				this.msgList.list.push(msg);
			},
			// 添加系统红包消息到列表
			addSystemRedEnvelopeMsg(msg) {
				this.msgList.list.push(msg);
			},
			openRed(params) {
				let _this = this;
				_this.luckbtn = "luckbtn";
				uni.showLoading({
					title: '加载中...'
				});
				//TODO 判断是哪种红包
				if (this.vendor_status == 1) {
					_get.getLeiHongBao(params, function(ret) {
						_this.receive_list.push(params.rid);
						_this.msgList.receive_list = _this.receive_list;
						_data.localData(_this.list_id, _this.msgList);
						//console.log(ret);
						uni.$emit('data_user_info', ret);
						_data.data('user_info', ret);
						setTimeout(function() {
							_this.luckbtn = "";
							_this.closeRedEnvelope();
							_this.toDetails(params.rid);
						}, 1000)
					}, function(ret) {
						setTimeout(function() {
							_this.luckbtn = "";
							_this.closeRedEnvelope();
							_this.toDetails(params.rid);
						}, 1000);
					});
				} else {
					_get.getHongBao(params, function(ret) {
						_this.receive_list.push(params.rid);
						_this.msgList.receive_list = _this.receive_list;
						_data.localData(_this.list_id, _this.msgList);
						//console.log(ret);
						uni.$emit('data_user_info', ret);
						_data.data('user_info', ret);
						setTimeout(function() {
							_this.luckbtn = "";
							_this.closeRedEnvelope();
							_this.toDetails(params.rid);
						}, 1000)
					}, function(ret) {
						setTimeout(function() {
							_this.luckbtn = "";
							_this.closeRedEnvelope();
							_this.toDetails(params.rid);
						}, 1000);
					});
				}

				uni.hideLoading();
			},
			// 打开红包
			openRedEnvelope(msg, index) {
				if (this.receive_list.indexOf(msg.content.rid) >= 0) {
					this.toDetails(msg.content.rid);
					return true;
				}
				this.windowsState = 'show';
				this.redenvelopeData = msg.content;
				this.redenvelopeData.index = index;
				return true;
			},
			// 关闭红包弹窗
			closeRedEnvelope() {
				this.windowsState = 'hide';
				setTimeout(() => {
					this.windowsState = '';
				}, 200)
			},
			sendSystemMsg(content, type) {
				let lastid = this.msgList.list[this.msgList.list.length - 1].msg.id;
				lastid++;
				let row = {
					type: "system",
					msg: {
						id: lastid,
						type: type,
						content: content
					}
				};
				this.screenMsg(row);
			},
			//领取详情
			toDetails(rid) {
				uni.navigateTo({
					url: 'message/details?rid=' + rid + '&list_id=' + this.list_id
				})
			},
			// 预览图片
			showPic(msg) {
				//console.log("msg预览1", msg)
				let url = this.staticPath + this.list_id + '/' + msg.content.url.replace('_thumb', '');
				uni.previewImage({
					indicator: "none",
					urls: [url]
				});
			},
			// 预览图片
			showPic1(msg) {
				// console.log("msg预览2类型图片", msg.content.full_url)
				// 	console.log("msg预览2类型图片",this.list_id + '/' + msg.content.url.replace('_thumb', ''))
				// 	console.log(this.msgImgList,'this.msgImgList')
				// full_url
				// let url = this.staticPath + this.list_id + '/' + msg.content.url.replace('_thumb', '');
				let url2 = this.staticPath2 + msg.content.full_url;
				// console.log(url,'11')
					console.log(url2,'222')
						console.log(this.msgImgList,' this.msgImgList')
				uni.previewImage({
					current: url2,
					indicator: "none",
					urls: this.msgImgList
				});
			},
			// 预览文字图片链接
			showPic2(url) {
				//console.log("msg预览3", url)
				uni.previewImage({
					indicator: "none",
					urls: [url]
				});
			},
			// 播放语音
			playVoice(msg) {

				this.AUDIO.stop();
				let _this = this;
				if (this.playMsgid == msg.id) {
					this.playMsgid = null;
				} else {
					this.playMsgid = msg.id;
					// this.AUDIO.obeyMuteSwitch = false;
					// todo修复语音
					let url = this.staticPath + msg.content.full_url;
					console.log('播放语音', url);
					_this.AUDIO.src = url;
					_this.$nextTick(function() {
						_this.AUDIO.play();
					});
					// this.AUDIO.src = (this.staticPath + msg.content.url);
				}
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				// this.RECORDER.start({ format: "mp3" });//录音开始,
				// 开始录音
				this.RECORD.start({
					format: "mp3"
				});

			},
			//录音开始UI效果
			recordBegin(e) {

				/** 暂停语音播放 */
				this.AUDIO.pause();
				this.recording = true;
				this.voiceTis = '松开 结束';
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORD.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORD.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				if (!this.willStop) {
					////console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					};
					//console.log(JSON.stringify(msg))
					let min = parseInt(this.RecordTime / 60);
					let sec = this.RecordTime % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					if (min > 0 || sec > 0) {
						msg.length = min + ':' + sec;
						this.sendMsg(msg, 1);
					}
				} else {
					//console.log('取消发送录音');
				}
				this.willStop = false;
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer(1);
				this.isVoice = this.isVoice ? false : true;
			},
			discard() {
				return;
			},
			maskMiddleNickname(nickname) {
			    if (nickname.length <= 2) {
			        return nickname; // 如果昵称长度小于等于2，不做任何处理
			    }
			  
			    // 计算需要替换为✳的长度
			    var replaceLength = nickname.length - 2;
			  
			    // 获取替换字符串
			    var replaceStr = '✳'.repeat(replaceLength);
			  
			    // 获取昵称的前两个字符和后两个字符
			    var firstTwoChars = nickname.substring(0, 2);
			    var lastTwoChars = nickname.substring(nickname.length - 2);
			  
			    // 生成遮蔽后的昵称
			    var maskedNickname = firstTwoChars + replaceStr + lastTwoChars;
			  
			    return maskedNickname;
			},
			sayCall() {
				let status = 0; //默认关闭匿名
				//console.log('this.msgList.is_niming:', this.msgList.is_niming)
				if (this.msgList.is_niming == 0) {
					uni.showLoading({
						'title': '匿名开启中...'
					});
					status = 1;
				}
				let _this = this;
				_get.updateUserSayType({
					list_id: this.list_id,
					status: status
				}, function() {
					if (_this.msgList.is_niming == 0) {
						uni.showToast({
							'title': '开启成功',
							'image': '/static/theme/default/my/niming.png',
							duration: 2000
						});
						_this.msgList.is_niming = 1;

						_this.niming_msg = '退出匿名';
					} else {
						_this.msgList.is_niming = 0;
						_this.niming_msg = '匿名';
					}
					_this.textareaFocus(); //隐藏抽屉
				}, function(ret) {
					uni.showToast({
						'title': ret.msg,
						icon: 'none',
						duration: 2000
					})
				});
			},
			scrollEven(e) {},
			zhendong() {
				_get.zhendong({
					list_id: this.list_id
				}, function(res) {

				}, function(res) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			group_info() {
				uni.navigateTo({
					url: './message/more?list_id=' + this.list_id + '&type=' + this.msgList.type,
				});
			},
			toUserDetail(item) {
				if (this.msgList.type == 1 && (this.msgList.is_action == 0)) {
					uni.showToast({
						title: '没有权限查看',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				uni.navigateTo({
					url: ('../details/index?user_id=' + item.user_id + '&type=1&list_id=' + this.list_id +
						"&is_action=" +
						this.is_action),
				});
			},
			getServing() {
				//判断权限
				if (this.msgList.type == 1 && (this.msgList.is_action == 0) && this.group_state && this.group_state
					.can_shangmai == 0) {
					uni.showToast({
						title: '此群被设置为只有群主和管理员才能上麦',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				let _this = this;
				if (this.onLine) { //在房间里直开启
					_this.showServing = true;
					//console.log("onLine.....")
					this.$refs.serving.joinOnline(this.list_id);
					return true;
				}
				//console.log("_this.servingState:", _this.servingState)
				if (_this.servingState == 1) {
					//下麦
					_this.showServing = false;
					_this.$refs.serving.xiaMai(this.list_id);
				} else {
					//上麦
					//console.log("joinRoom....")
					_this.showServing = true;
					this.$refs.serving.joinRoom(this.list_id);
				}
			},
			setSeringState(detail) {
				//console.log("this.servingState:", JSON.stringify(detail))
				this.servingState = detail.state
			}
		},
		watch: {},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './message/more?list_id=' + this.list_id + '&type=' + this.msgList.type,
			});
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/chat/style.scss";

	 
	  .page{
		  overflow: hidden;
		  ::-webkit-scrollbar {
		  display: none;
		  width: 0 !important;
		  height: 0 !important;
		  -webkit-appearance: none;
		  background: transparent;
		  }
		  -webkit-overflow-scrolling:touch;
	  }
	.other {
		.left {
			position: relative;

			.user_tips {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				line-height: 1;
				background: linear-gradient(92deg, #F7CBFD 0%, #7758D1 100%);
				border-radius: 0 0 10rpx 10rpx;
				text-align: center;
				font-size: 20rpx;
				color: #fff;

				&.gl {
					background: linear-gradient(92deg, #ffd0c4 0%, #ff634a 100%);
				}

				image {
					width: 100%
				}
			}

			.action {
				width: 160rpx;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .2);
				position: absolute;
				z-index: 10;
				top: 100rpx;
				left: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;

				.action-line {
					height: 2rpx;
					width: 100rpx;
					margin: 6rpx auto;
					background-color: #ddd;
				}

				.action-item {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					height: 54rpx;
				}
			}
		}
	}

	.popup_friends {
		background-color: rgba(0, 0, 0, .3);
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.popup_friends-top {
		height: 200rpx;
		flex-shrink: 0;
		/* #ifdef H5 */
		height: 500rpx;
		/* #endif */
	}

	.text-gray {
		color: gray;
	}

	.address-name {
		display: flex;
		flex-direction: column;
	}

	.address-flex {
		display: flex;
		align-items: center;
	}

	.fun-icon {
		width: 90rpx;
		height: 90rpx;
		margin: 10rpx;
	}

	.more-layer {
		// height: 800rpx;
	}

	.send-card {
		width: 700rpx;
		height: 200rpx;
		display: flex;
		max-width: 70%;
		min-height: 25px;
		border-radius: 5px;
		font-size: 14px;
		background-color: #fff;
		flex-direction: column;
		color: #333;
	}

	.send-card-content {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20upx;
		height: 100%;
		border-bottom: 2px solid #e1e1e1;
	}

	.send-card-content text {
		margin-left: 20upx;
	}

	.send-card-content-text {
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		margin-left: 20upx;
	}

	.video-but-view {
		padding: 20upx;
		border-radius: 10upx 10upx 0 0;

		.video-but {
			margin-bottom: 18upx;
			background: #817e7e;
			color: #fff;
		}
	}

	.box textarea {
		padding-left: 5px;
	}

	.list .list-box {
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.luckbtn {
		-webkit-transform: rotateY(360deg);
		animation: rotation 0.4s linear infinite;
		-moz-animation: rotation 0.4s linear infinite;
		-webkit-animation: rotation 0.4s linear infinite;
		-o-animation: rotation 0.4s linear infinite;
	}

	@-webkit-keyframes rotation {
		from {
			-webkit-transform: rotateY(0deg);
		}

		to {
			-webkit-transform: rotateY(360deg);
		}
	}

	.bubble-bofang {
		position: absolute;
		right: 215upx;
	}

	.bubble-bofang-left {
		position: absolute;
		left: 215upx;
	}

	.showVedio {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 300;
		background-color: #000;
	}

	.cloneBut {
		position: relative;
		text-align: right;
		font-size: 24px;
		color: red;
		margin-left: 10px;
		margin-top: 10px;
		height: 30px;
		width: 30px;
	}

	.cloneBut-img {
		position: absolute;
		width: 30px;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.gong-gao-content {
		position: fixed;
		/*height: 30px;*/
		width: 100%;
		z-index: 2;
		/*padding: 10rpx 10rpx;*/
	}

	.gong-gao-content-info {
		display: flex;
		align-items: center;
		background-color: #e0e0e0;
		height: 100%;
	}

	.gong-gao-content-info-icon {
		font-size: 20px;
		margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.sys:nth-child(1) {
		margin-top: 50px;
	}

	.member-image-logo {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 10px;
		box-shadow: inset 0px 15px 15px -23px #000;
		background-color: #ffffff;
		overflow-x: auto;
	}

	.member-content {
		white-space: nowrap;
		text-align: center;
	}

	.img-logo {
		width: 40px !important;
		height: 40px !important;
		border-radius: 10px;
		display: inline-block;
		padding: 0 5px;
	}

	.jiazai {
		margin-right: 20px;
	}

	.jiazai image {
		width: 40rpx;
		height: 40rpx;
	}

	.right-avatar {
		position: relative;

		.user_tips {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100%;
			line-height: 1;
			background: linear-gradient(92deg, #F7CBFD 0%, #7758D1 100%);
			border-radius: 0 0 10rpx 10rpx;
			text-align: center;
			font-size: 20rpx;
			color: #fff;

			&.gl {
				background: linear-gradient(92deg, #ffd0c4 0%, #ff634a 100%);
			}

			image {
				width: 100%
			}
		}
	}

	.userinfoname {
		font-size: 10px;
		position: absolute;
		top: -49%;
	}

	.userinfonameyou {
		font-size: 10px;
		position: absolute;
		top: -49%;
		left: -100%;
	}
</style>